<template>
    <div class="indent" v-if="ordata">
        <Search></Search>
        <!-- 订单头部 -->
        <div class="three-head">
            <div class="area">
                <router-link to="/index"><span class="hover">首页</span></router-link>    
                <Icon type="ios-arrow-right" class="iconfont"></Icon>
                <router-link to="/personal/myorder"><span class="hover">个人中心</span></router-link>    
                <Icon type="ios-arrow-right" class="iconfont"></Icon>
                <!-- <router-link to=""><span class="hover">我的订单</span></router-link>    
                <Icon type="ios-arrow-right" class="iconfont"></Icon> -->
                <span>订单详情</span>
            </div>
        </div>
        <!-- 订单状态 -->
        <div class="state area">
            <div class="plan">
                <!-- 待付款 -->
                <Steps :current="0" v-if="ordata.orderActions[0].acStatus == 101001">
                    <Step title="提交订单" :content="ordata.orderActions[0].addtime"></Step>
                    <Step title="买家支付" ></Step>
                    <Step title="商家发货" ></Step>
                    <Step title="确认收货"  style="width : 160px"></Step>
                </Steps>
                <!-- 取消订单 -->
                <Steps :current="1" v-if="ordata.orderActions[0].acStatus == 101002">
                    <Step title="提交订单" ></Step>
                    <Step title="买家支付" ></Step>
                    <Step title="商家发货" ></Step>
                    <Step title="确认收货"  style="width : 160px"></Step>
                </Steps>
                <!-- 商家发货待收货 -->
                <Steps :current="2" v-if="ordata.orderActions[0].acStatus == 101003">
                    <Step title="提交订单" content="2018.01.22  12:30"></Step>
                    <Step title="买家支付" content="2018.01.22  12:30"></Step>
                    <Step title="商家发货" content="2018.01.22  12:30"></Step>
                    <Step title="确认收货" content="2018.01.22  12:30" style="width : 160px"></Step>
                </Steps>
                <!-- 确认收货 -->
                <Steps :current="3" v-if="ordata.orderActions[0].acStatus == 101008">
                    <Step title="提交订单" content="2018.01.22  12:30"></Step>
                    <Step title="买家支付" content="2018.01.22  12:30"></Step>
                    <Step title="商家发货" content="2018.01.22  12:30"></Step>
                    <Step title="确认收货" content="2018.01.22  12:30" style="width : 160px"></Step>
                </Steps>
            </div>
        </div>
        <!-- 订单信息 -->
        <div class="message" v-if="ordata">
            <div class="area">
                <div class="mes-title">订单信息</div>
                <div class="mes-img">
                    <img src="../assets/img/state.png">
                    <!-- 待付款 -->
                    <div class="mesimg-p" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101001">
                        <p>商品已拍下，等待买家付款！</p>
                        <!-- <p>您还有<countdown :endTime="timestamp"></countdown>来付款,超时订单自动关闭</p> -->
                        <p>您还有<span>{{timetp}}</span>来付款,超时订单自动关闭</p>
                        <div class="button yesbutton" @click="payment(ordata.orderLists[0].orderInfo.oid)">立即付款</div>
                    </div>
                    <!-- 取消订单 -->
                    <div class="mesimg-p" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101004">
                        <p>买家取消订单，交易自动关闭！</p>
                    </div>
                    <!-- 超时未支付 -->
                    <div class="mesimg-p" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101005">
                        <p>超时未支付，交易自动关闭！</p>
                    </div>
                    <!-- 待发货 -->
                    <div class="mesimg-p" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101002">
                        <p>商品已支付，等待卖家发货！</p>
                        <p>商家会尽快安排发货！</p>
                    </div>
                    <!-- 已发货/待收货 -->
                    <div class="mesimg-p" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101003">
                        <p>商品已支付，等待卖家发货！</p>
                        <p>请随时跟进订单信息！</p>
                    </div>
                    <!-- 交易完成 -->
                    <div class="mesimg-p" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101008">
                        <p>交易已完成！</p>
                        <p>售后服务请联系商家！</p>
                    </div>
                </div>
                <div class="mes-xx" v-if="ordata.orderLists[0].orderInfo !=0">
                    <div class="p ov"><span>订单编号：{{ordata.orderLists[0].orderInfo.oid}}</span>
                        <span class="mes-ddbh">收货人：{{ordata.orderLists[0].orderInfo.consignee}}</span>
                    </div>
                    <div class="p ov">
                        <span class="mes-shr">联系电话：{{ordata.orderLists[0].orderInfo.mobile}}</span>
                        <div class="mer-ll">
                            <span class="shdz">收货地址：</span> 
                            <div class="shdzt">{{ordata.orderLists[0].orderInfo.address}}</div>
                        </div>
                    </div>
                    <div class="lh p">
                        <span>买家备注：</span>
                        <div class="mjbz">
                            {{ordata.orderLists[0].orderInfo.buyerRemark}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 物流信息 -->
        <div class="logistics" v-if="lodata">
            <div class="area">
                <h3>物流信息</h3>
                <div class="logtime">
                    <p>发货时间：{{lodata.addTime}}</p>
                    <p>物流公司：{{lodata.com}}</p>
                </div>
                <div class="logcontent">
                    <p class="logbottom">快递单号： {{lodata.nu}}</p>
                    <div class="logtail">
                        <span>物流跟踪：</span>
                        <div class="logcont">
                            <div class="stage" v-for="items in lodata.logisInfo" :key="items.id">
                                <p>·{{items.context}}</p>
                                <p class="logcont-time">{{items.time}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商品清单 -->
        <div class="inventory">
            <div class="area">
                <div class="inven-head">
                    <h3>商品清单</h3>
                    <div class="inven-title">
                        <span>商品</span>
                        <span>单价</span>
                        <span>数量</span>
                        <span>实付款</span>
                        <span>交易状态</span>
                        <span>操作</span>
                    </div>
                </div>
                <!-- 商品清单详情 -->
                <div class="invencont">
                    <div class="inven-head">
                        <span>订单编号：{{ordata.orderLists[0].orderInfo.oid}}</span>
                        <span>{{ordata.orderLists[0].orderInfo.addtime}}</span>
                    </div>
                    <div class="inven-body">
                        <div class="invenbody-left" v-for="item in ordata.orderLists[0].orderProComms" :key="item.id">
                            <img :src="item.proUrl">
                            <div class="describe">
                                <p>{{item.proName}}</p>
                                <p>{{item.proInfo}}mm</p>
                            </div>
                            <div class="invenmoney">￥{{item.salesPrice}}</div>
                            <div class="invennum">{{item.commodityNum}}</div>                      
                        </div>
                        <div class="invenbody-right">
                            <div class="invenright-money">
                                <p>¥ {{ordata.orderLists[0].orderInfo.amountPayable}}</p>
                                <p>（包邮）</p>
                            </div>
                            <div class="dealstate" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101008">
                                <p>交易完成</p>
                            </div>
                            <div class="dealstate" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101003">
                                <p>已发货</p>
                            </div>
                            <!-- 待收货 -->
                            <div class="qrdd" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101003">
                                <p class="fkbutton" @click="affirmgoods">确认收货</p>
                            </div>
                            <!-- 待发货 -->
                            <div class="dealstate" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101002">
                                <p>等待发货</p>
                            </div>
                            <!-- 待付款 -->
                            <div class="dealstate" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101001">
                                <p>等待付款</p>
                            </div>
                            <div class="qrdd" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101001">
                                <p>剩余{{timetp}}</p>
                                <p class="fkbutton" @click="payment(ordata.orderLists[0].orderInfo.oid)">立即付款</p>
                                <p class="qxdd" @click="cancelindent(ordata.orderLists[0].orderInfo.oid)">取消订单</p>
                            </div>
                            <!-- 取消订单 -->
                            <div class="dealstate" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101004">
                                <p>交易关闭</p>
                            </div>
                            <div class="qrdd" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101004">
                                <p>买家取消订单</p>
                            </div>
                            <!-- 超时未支付 -->
                            <div class="dealstate" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101005">
                                <p>交易关闭</p>
                            </div>
                            <div class="qrdd" v-if="ordata.orderLists[0].orderInfo.orderStatus == 101005">
                                <p>超时未支付</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 提示弹窗 -->
        <Modal :content="tsmsg" :visible.sync = waitgoods @determine = "buttway"></Modal>
    </div>
</template>
<script>
import Search from "../components/search"
import Modal from "../components/modal"
// import Countdown from "../components/countdown"
import { Icon,Steps,Step } from "iview"
import { logisticsinquire,orderList,orderCancel } from "../http/api"
export default {
    components: {
        Search,
        Modal,
        // Countdown,
        Icon,
        Steps,
        Step
    },
    data () {
        return {
            lodata:null,    //物流信息
            ordata:null,    //订单信息
            // addressdata:null,//订单信息（指定）
            proCount:0,      //传递件数
            money:0,
            waitgoods:false, //提示弹窗
            tsmsg:"",   //弹窗提示字
            timetp:"", //显示时间
            qxgoods:false,//取消货物时的弹窗
        }
    },
    methods: {
        //物流信息
        logistics () {
            logisticsinquire({com:"百事汇通",nu:"71320408219393"}).then(res => {   
                this.lodata = res.data
                // console.log(res)
            })
        },
        //订单信息
        indent (oid) {
            orderList({oid:oid}).then(res =>{
                this.ordata = res.data
                let oid = res.data.orderLists[0].orderInfo.oid
                // console.log(res)
                res.data.orderLists[0].orderProComms.map(item =>{
                    this.proCount += item.commodityNum
                    this.money += item.salesPrice * item.commodityNum
                    // console.log(this.proCount)
                })
                if(res.data.orderLists[0].orderInfo.orderStatus == 101001){
                    //设置定时器
                    let timenull = setInterval(function(){  
                        timeshow()
                    },1000) 
                    let _this = this
                    let timeshow = function (){     
                        //获取订单时间
                        let addtime = res.data.orderActions[0].addtime
                        // 当前时间戳
                        let nowTime = new Date();
                        let endTime = new Date(addtime);
                        let time = endTime.getTime() - nowTime.getTime() + 86400000;   
                        if(time > 0) {
                        let hour= parseInt((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
                            if(hour <=9){
                                hour = "0" + hour
                            }
                            let minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
                            if(minutes <=9){
                                minutes = "0" + minutes
                            } 
                            _this.timetp = hour + "时" + minutes + "分"
                        }else{
                            clearInterval(timenull)
                            _this.indent()
                        }
                    }
                    timeshow()
                }
            })        
        },
        //立即付款
        payment (oid) {            
            this.$router.push({path:"/affirminist",query:{oids:oid,orderAmount:this.money,proCount:this.proCount}})
        },
        //确认收货
        affirmgoods () {
            this.waitgoods = true
            this.tsmsg = "您是否确定已收到货物？"
        },
        //取消订单
        cancelindent (oid) {
            this.qxoid = oid
            this.waitgoods = true
            this.tsmsg = "是否确定取消该订单？"
            this.qxgoods = true
        },
        // 弹出框确认按钮
        buttway () {
            // 当取消订单时候的弹窗显示
            let receiveflag = false
            if(this.qxgoods){
                receiveflag = true
                if(receiveflag){
                    orderCancel({oid:this.qxoid}).then(res =>{
                        if(res.data.status == 1000){
                            this.$router.push({path:"/personal/myorder"})
                        }
                    })
                }
            }      
        }
    },     
    created () {
        let oid = this.$route.query.oid
        // let com = this.$route.query.com
        // let nu = this.$route.query.nu
        this.logistics()
        this.indent(oid)
    }
}
</script>
<style lang="less">
@import "../assets/styles/indent.less";
</style>


